import { ModalForm, ProFormText } from '@ant-design/pro-components';

const RestPasswordModal: React.FC = ({ modalInfo, open, onOpenChange, onFinish }) => {
  // 提交按钮
  const prevFinish = (values) => {
    onFinish(values);
  };

  if (!open) {
    return null;
  }

  return (
    <ModalForm
      layout="horizontal"
      width={480}
      title="重置密码"
      open={open}
      onOpenChange={onOpenChange}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => onOpenChange(false),
      }}
      onFinish={prevFinish}
    >
      <ProFormText
        name="account"
        label="账号"
        initialValue={modalInfo?.account}
        disabled
        placeholder="请输入邮箱格式的账号"
        rules={[
          { required: true, message: '请输入账号' },
          { type: 'email', message: '请输入邮箱格式的账号' },
        ]}
        fieldProps={{
          maxLength: 50,
        }}
      />
      <ProFormText
        name="newPassword"
        label="新密码"
        width={240}
        fieldProps={{
          type: 'password',
          minLength: 8,
          maxLength: 16,
        }}
        placeholder="请输入8-16位数字+字母的密码"
        rules={[
          { required: true, message: '请输入新密码' },
          {
            pattern: /^(?=.*[a-zA-Z])(?=.*\d).{8,16}$/,
            message: '请输入8-16位数字+字母的密码',
          },
        ]}
      />
      <ProFormText
        name="confirmPassword"
        label="确认密码"
        width={240}
        fieldProps={{
          type: 'password',
          minLength: 8,
          maxLength: 16,
        }}
        placeholder="确认密码与新密码一致"
        rules={[
          { required: true, message: '请输入确认密码' },
          {
            pattern: /^(?=.*[a-zA-Z])(?=.*\d).{8,16}$/,
            message: '请输入8-16位数字+字母的密码',
          },
        ]}
      />
    </ModalForm>
  );
};

export default RestPasswordModal;
